<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
	<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
    <meta name="mobile-web-app-capable" content="yes">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="apple-mobile-web-app-status-bar-style" content="black-translucent">

    <title>Demo Webgl Made.com</title>
	
    <link rel="stylesheet" type="text/css" href="js/bootstrap.min.css">
	<link rel="stylesheet" type="text/css" href="js/scene.css">
	<link href="https://fonts.googleapis.com/css?family=Lato" rel="stylesheet">

    <script src="js/hand.js"></script>
	<script src="js/Babylon.js"></script>
	<script src="js/scene_min.js"></script>
	<script src="js/meuble_min.js"></script>
	<script src="js/cinematique_min.js"></script>
    <script src="js/jquery.min.js"></script>
    <script src="js/bootstrap.min.js"></script>

</head>
<body>
    
    <div class="container-fluid">
        <div class="row">
            <div class="col-md-12">
                <div class="col-md-6 col-md-offset-1 content ">
                  <div class='visible'>
                    <p>
                      Personnaliser
                    </p>
                    <ul>
                      <li>vos couleurs !</li>
                      <li>vos materiaux !</li>
                      <li>vos idées !</li>
                      <li>votre style !</li>
                    </ul>
                  </div> 
                </div>
            </div>
            <!-- Menu Top section: -->
            <div id="top_menu" class="col-md-8 col-md-offset-2 col-sm-12 menuTop text-center"><!--  -->
                <img class="btn all_btn" src="img/btn_base.png" onclick="changed_color_meuble ('Assets/Wood_base.jpg')"/>
                <img class="btn all_btn" src="img/btn_old.png" onclick="changed_color_meuble ('Assets/Wood_old.jpg')"/>
                <img class="btn all_btn" src="img/btn_wood01.png" onclick="changed_color_meuble ('Assets/Wood_01.jpg')"/>
                <img class="btn all_btn" src="img/btn_wood02.png" onclick="changed_color_meuble ('Assets/Wood_02.jpg')"/>
                <img class="btn all_btn" src="img/btn_wood03.png" onclick="changed_color_meuble ('Assets/Wood_03.jpg')"/>
                <img class="btn all_btn" src="img/btn_black.png" onclick="changed_color_meuble ('Assets/noir.jpg')"/>
            </div>
            <!-- Canvas section: -->
            <div class="col-md-12 text-center">
                <div class="col-lg-1">
                    
                </div>
                <div class="col-md-11">
                    <canvas id="renderCanvas"></canvas>
                </div>
            </div>
            <!-- Menu Bas section: -->
            <div id="bottom_menu" class="col-md-8 col-md-offset-2 col-sm-12 menuBottom text-center"><!--  -->
                <img class="btn all_btn" src="img/btn.png" onclick="changed_color_caisses('Assets/blanc.jpg',0)"/>
                <img class="btn all_btn" src="img/btn_black.png" onclick="changed_color_caisses('Assets/noir.jpg',0)"/>
                <img class="btn all_btn" src="img/btn_bleu.png" onclick="changed_color_caisses('Assets/bleu.jpg',0)"/>
                <img class="btn all_btn" src="img/btn_gris.png" onclick="changed_color_caisses('Assets/gris.jpg',0)"/>
                <img class="btn all_btn" src="img/btn_base.png" onclick="changed_color_caisses('Assets/Wood_base.jpg',1)"/>
                <img class="btn all_btn" src="img/btn_old.png" onclick="changed_color_caisses('Assets/Wood_old.jpg',1)"/>
            </div>
        </div>
        <div class="col-xs-1 divBtn ">
                <div class="color white" onclick="document.body.style.backgroundColor='#fff'"></div>
                <div class="color gray" onclick="document.body.style.backgroundColor='#7A7979'"></div>
                <div class="color blue" onclick="document.body.style.backgroundColor='#435573'"></div>
                <div class="color taupe" onclick="document.body.style.backgroundColor='#B6B3A5'"></div>
                <div class="color beige" onclick="document.body.style.backgroundColor='#F3F1E9'"></div>
            </div>
    </div> 
	
    <script>
		var canvas,engine;

        canvas = document.getElementById("renderCanvas");
        engine = new BABYLON.Engine(canvas, true);

        document.addEventListener("DOMContentLoaded", function () {

        if (BABYLON.Engine.isSupported()) {
            initScene();
        }
        });
        
        var counter=0;
        var state=0;
        
        function chrono(){
            counter += 1;
            //console.log(counter);
            if (counter >= 5000){
                if(state == 1){
                    cine01.play (0,720,true);
                    cine02.play (0,720,true);
                    play_meuble ();
                    mode_cine ();
                    state=0;
                }
            }
        }
        
        canvas.addEventListener('click', function() {
            if(state == 0){
                cine01.playCam.stop();
                cine01.playTarget.stop();
                cine02.playCam.stop();
                cine02.playTarget.stop();
                meubleTV.cust_anim.stop();
                mode_config ();
                state=1;
            }
            counter=0;
        });
        
        setInterval(chrono,1);
        
    </script>
</body>
</html>
